<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/0.3.0/js/mdui.min.js"></script>-->
    <!--<link href="/mdui/css/mdui.css"  rel="stylesheet">-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
    <link href="/mdui/css/mdui.css" rel="stylesheet">
    <script src="/mdui/js/mdui.js" rel="script"></script>
    <script src="/jquery/jquery-3.2.1.min.js" rel="script"></script>
    <script src="/js/common.js"></script>

</head>
<body class=" mdui-container mdui-color-grey-200">
<div class="mdui-shadow-3  mdui-center mdui-m-t-5  mdui-color-white" style="display: flex;width: 50%">
    <form id="loginForm" method="post" >
        <div class="mdui-textfield mdui-textfield-floating-label mdui-m-x-5">
            <label class="mdui-textfield-label">用户账号</label>
            <input class="mdui-textfield-input" name="phone" id="phone" type="text" required=""/>
            <div class="mdui-textfield-error">账号不能为空</div>
        </div>

        <div class="mdui-textfield mdui-textfield-floating-label  mdui-m-x-5">
            <label class="mdui-textfield-label">密码</label>
            <input class="mdui-textfield-input" name="password" id="password" type="password"
                   pattern="^.*(?=.{6,})$" required=""/>
            <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
        </div>

        <div style="margin-left: 40px">
            <label class="mdui-radio">
                <input type="radio" name="userRole" checked value="0"/>
                <i class="mdui-radio-icon"></i>
                普通员工
            </label>

            <label class="mdui-radio" style="margin-left: 100px">
                <input type="radio" name="userRole" value="1"/>
                <i class="mdui-radio-icon"></i>
                管理员
            </label>
        </div>

        <div style="display: flex;justify-content: flex-end">
            <button  type="button" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-deep-purple mdui-m-r-5 mdui-m-b-2" id="loginBtn">Login </button>
        </div>
    </form>

</body>
<script type="text/javascript">
    $("#loginBtn").click(function () {
        var user = {
            phone: $("#phone").val(),
            password: $("#password").val(),
            userRole: $("#loginForm").serializeObject().userRole,
        };
        $.ajax({
            type: "POST",
            data: user,
            url: "/login/login",
            success: function (data) {
                console.log(data);
                if (data.status===200){
                    window.location.href = "/admin/adminManager";
                }else{
                    mdui.snackbar({
                        message: data.status===200?'登录成功':'登录失败,'+data.message,
                        buttonText: 'OK',
                        timeout:700,
                        onClose: function () {
                        }
                    });
                }
            },
            error: function (request) {
                mdui.snackbar({
                    message: '登录失败,未知错误',
                    buttonText: 'OK',
                });
            }
        });
    });
</script>
</html>